/* Basic Component
  ========================================================================== */

.field-width-selector {
    @apply w-12 h-5 flex relative cursor-pointer;

    .field-width-label {
        @apply absolute text-4xs font-bold w-full text-center z-10 text-gray-700 dark:text-dark-150 inset-0 flex items-center justify-center pointer-events-none;
    }

    .field-width-notch {
        @apply relative border border-gray-400 dark:border-dark-300 rtl:border-r-0 ltr:border-l-0 flex-1;

        &:first-of-type {
            @apply rtl:border-r ltr:border-l rtl:rounded-r-sm ltr:rounded-l-sm;
        }

        &.filled {
            @apply border-gray-400 dark:border-dark-400 rtl:border-l-0 ltr:border-r-0 rtl:pl-px ltr:pr-px bg-white dark:bg-dark-575 -my-px;
        }

        &.selected {
            @apply rtl:border-l ltr:border-r rtl:rounded-l-sm ltr:rounded-r-sm;
        }
    }
}

/* The Fieldtype
  ========================================================================== */

.width-fieldtype .field-width-selector {
    @apply w-16 h-9 mt-px;

    .field-width-notch {
        @apply bg-gray-200 dark:bg-dark-550 border-r-gray-400 dark:border-dark-700 border-y-gray-500 dark:border-y-dark-750;
        &:last-child {
            @apply border-r-gray-500 dark:border-dark-750 rtl:rounded-l-sm ltr:rounded-r-sm;
        }

        &.filled {
            @apply bg-gradient-to-b from-white to-gray-100 dark:from-dark-300 dark:to-dark-400 border-gray-500 dark:border-dark-750;
        }
    }

    .field-width-label {
        @apply text-2xs;
    }
}
